import { useStateUserInfo } from '@/store/hooks';
import { Product } from '@/types';
import { Button, Tag } from 'antd';
import { useNavigate } from 'react-router-dom';
import './index.less';

interface ProductCardProps{
  product:Product;
  link:string;
}

function ProductCard(props:ProductCardProps) {
  const navigate = useNavigate();
  const userInfo = useStateUserInfo()
  const { product,link } = props;
  const handleClickToDoc = () => {
    navigate('/cloud_doc/' + product.key);
  };
  let targetUrl = import.meta.env.REACT_APP_API_BASE
  const handleClickApply = (url:string) => {
    if(!userInfo){
      window.location.href = targetUrl + '/login'
    }else{
      const findUrl = targetUrl + url
      window.location.href = findUrl
    }
  };
  return (
    <div className="product-card">
      <div className="title">{product.title}</div>
      <div className='description'>{product.description}</div>
      <div className="tag-wrapper">
        {product.label.map((item,index)=> <Tag key={index}>{item}</Tag>)}
      </div>
      <div className="action">
        { 
          product.btn1Show && <Button type="primary" size="small" onClick={()=> {handleClickApply(product.url)}}>{product.btn1Label}</Button>
        }
        {
           <Button size="small" disabled={!product.isShowDoc} onClick={handleClickToDoc}>文档中心</Button>
        }
       
      </div>
    </div>
  );
}

export default ProductCard;
